/*    .top  类选择器*/
/*.top{*/
/*    color: red;*/
/*    background-color: blueviolet;*/
/*}*/
/*  #topId  id选择器 */
/*#topId {*/
/*    color: blue;*/
/*    background-color: blueviolet;*/
/*}*/

/* div[title=top_title] 属性选择器 */
/*div[title=top_title]{*/
/*    color: green;*/
/*    background-color: yellow;*/
/*}*/
/*div[onclick]{*/
/*    color: yellow;*/
/*    background-color: blue;*/
/*}*/
/*  div 元素选择器*/
/* div{*/
/*     color: darkkhaki;*/
/*     background-color: black;*/
/* }*/
/*    推荐css 全部用类选择器,js 用id选择器*/
/*    .three{*/
/*        color: red;*/
/*    }*/
/*   body > div:nth-child(4) 子代选择器 */
/*   body div:nth-child(4) 如果没有> ,直接以空格的形式，
表示body下面所有div的第四个元素  */
/*body > div:nth-child(4) {*/
/*    background-color: darkkhaki;*/
/*}*/

/*通配符，所有的标签都可以拿到*/
/** {*/
/*    !*    对所有的标签设置颜色*!*/
/*    color: green;*/
/*}*/

/* 标签/元素选择器*/
/*span {*/
/*    color: red;*/
/*}*/

/*p {*/
/*    color: blue;*/
/*}*/

/*自定义元素选择器*/
/*aaaaa {*/
/*    color: rebeccapurple;*/
/*}*/

/*自定义属性选择器*/
/*div[aaaa] {*/
/*color: #3b8d8d;*/
/*color: rebeccapurple;*/
/*color: rgb(236, 11, 11);*/
/*rgba 里面的a表示透明度，在0到1之间*/
/*color: rgba(236, 11, 11,0.1);*/
/*}*/

/* 理解为优先级：如果多个地方都对一个地方设置了样式，那么显示样式一定是优先级高的显示出来*/
/*   *  > 自定义属性选择器 */
/* *> id选择器 >属性选择器>  类选择器  > 自定义属性选择器*/
/*优先级的目的：如果以后你用类选择器达不到效果，则用比类现在去更高一级的选择器*/
.bj-img {
    background-image: url("../img/m331.jpg");
    /*    如果要对div设置背景图片，那么一定要设置div的大小*/
    /*height: 190px;*/
    /*width: 268px;*/
    /*    如果要把整个图片显示完全，则要设置背景图片的大小，一般建议用自适应*/
    background-size: 100% 100%;
    /*    如果只知道宽度，不知道高度怎么办？*/
    width: 218px;
    height: calc(218 * 190px / 268);
}

aaaaa {
    /*border: 10px solid rebeccapurple;*/
    border-right: 10px solid rebeccapurple;
    border-left: 15px dashed green;
    border-top: 30px double blue;
    border-bottom: 20px inset red;
}

.left {
    width: 200px;
    background-color: blue;
    border: 5px solid gold;
}

.mid {
    width: 300px;
    background-color: red;
    border: 5px solid aqua;
    /*边框离其他div之间的距离*/
    /* margin: 10px;离四周10个像素*/
    /*margin: 10px;*/
    /*margin 四个参数 ： 上右下左*/
    margin: 10px 40px 30px 20px;

    /*margin-top: 10px;*/
    /*margin-left: 20px;*/
    /*margin-right: 40px;*/
    /*margin-bottom: 30px;*/


    /*内边距：内容和边框之间的距离*/
    padding: 20px 10px 30px 40px;


    /*padding-top: 20px;*/
    /*padding-right: 10px;*/
    /*padding-bottom: 30px;*/
    /*padding-left: 40px;*/

}

* {
    margin: 0;
}

.right {
    width: 100px;
    background-color: green;
    border: 5px solid darkblue;
}

.top {
    border: 10px solid red;
    display: flex;
    justify-content: center;
}

.top > div {
    border: 10px solid blue;
    width: 1000px;
    /*display: flex;*/
    /*justify-content: center;*/
    /*justify-content: space-between;*/
    /*display: flex;*/
    /*flex-direction: column-reverse;*/
}

.top > div > div {
    display: flex;
    justify-content: center;
}
.mid{
    /*display: flex;*/
    /*align-items: center;*/
    /*align-items: flex-start;*/
    /*align-items: flex-end;*/
    /*align-items: baseline;*/
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*flex-wrap: nowrap;*/
    /*flex-direction: column-reverse;*/
}
.mid>div{
    border: 1px solid blue;
    background-color: aqua;
    width: 100px;
}
.mid>div:nth-child(1){
    width: 400px;

    /*height: 500px;*/
    /*padding: 30px;*/
}
.mid>div:nth-child(2){
    height: 150px;
    /*padding: 50px;*/

}
.mid>div:nth-child(3){
    height: 40px;
    /*margin: 30px;*/
}
.mid>div:nth-child(4){
    height: 65px;
    /*margin: 70px;*/
}
.single-over{
    /*多余的隐藏*/
    /*overfly*/
    overflow: hidden;
    /*不换行*/
    white-space: nowrap;
    /*溢出的文本：ellipsis 。。。*/
    text-overflow: ellipsis;
}

/*多行溢出*/
.many-over-two {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.many-over-three {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.test{
    width: 200px;
}